<template>
	
	<view >
		<comHeader :config="navConfig" :rightTapHandle="rightTapHandle"/>
		<!-- <view @tap="sure" class="queding">完成</view> -->
		<view class="crew">
			<view class="crew-list">
				
				<view class="crew-item" v-for="(item,index) in crewData" :key='index'>
					<view class="tip">{{item.address}}</view>
					<image class="img" :src="item.img"></image>
					<!-- <image class="img1" :src="item.img1"></image>
					<image class="img2" :src="item.img2"></image> -->
					<!-- <radio class="one" value="r2" color="#2F8FFF" style="transform:scale(0.7)" /> -->
					<checkbox class="one" value="cb" style="transform:scale(0.7)" />
					<view class="name">
						<text>
							{{item.name}}
						</text>
					</view>
					<text class="price">￥{{item.price}} <text class="qi">起</text></text>
				</view>
			</view>
		</view>
		
		<view class="di-item" v-for="(item,index) in diData" :key='index'>
			<view class="choose">已选中{{item.choose}}个收藏</view>
			<view class="bianji" url=""><text>转至其他编辑</text></view>
			<view class="quxiao" type="button" @click="togglePopup('center', 'tip')"><text>取消收藏</text></view>
			<!-- <view class="quxiao" type="button" @click="togglePopup('center', 'tip')"><i>取消排队</i></view> -->
			<uni-popup ref="popup" :type="type" @change="change">{{ content }}</uni-popup>
			<uni-popup :show="show" :type="type" :custom="true" :mask-click="false" @change="change">
				<view class="uni-tip">
					<view class="uni-tip-title">温馨提示</view>
					<view class="uni-tip-content">确定要删除选择的1条收藏吗？</view>
					<view class="uni-tip-group-button">
						<view class="uni-tip-button" @click="cancel('tip')">取消</view>
						<view class="uni-tip-button2" @click="cancel('tip')">删除</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import FootMenu from '@/components/footMenu.vue'
	import ShouyeOrder from '@/components/shoyeOrder.vue'
	import HotelQuery from '@/components/hotelQuery.vue'
	export default{
		components: {
			uniPopup,
			ShouyeOrder,
			FootMenu,
			HotelQuery
		},
		data(){
			return{
				show: false,
				type: '',
				navConfig:{
					isFixed:false, //是否absolute布局
					comScroll:0,
					left:{
						
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:'旅游景区'
					},
					right:{
						text:'完成',
						isShowRight:true,
					},
				},
				
				curTabIndex: 0,
				crewData:[
					{
						address:'本溪',
						name:'本溪大峡谷',
						img:'/static/myPic/daxiagu.jpg',
						// img1:'/static/myPic/weixuanzhong.png',
						price:'199',
					},
					{
						address:'沈阳',
						name:'沈阳+丹东 跟团游',
						img:'/static/myPic/daxiagu.jpg',
						// img2:'/static/myPic/xuanzhong.png',
						price:'199',
					},
					{
						address:'沈阳',
						name:'沈阳故宫',
						img:'/static/myPic/daxiagu.jpg',
						// img1:'/static/myPic/weixuanzhong.png',
						price:'199',
					},
					{
						address:'沈阳',
						name:'方特欢乐世界',
						img:'/static/myPic/daxiagu.jpg',
						// img1:'/static/myPic/weixuanzhong.png',
						price:'199',
					}
				],
				diData:[
					{
						choose:'1',
					}
				]
				
			}
		},
		
		methods: {
			togglePopup(type, open) {
				
				this.type = type
				if (open === 'tip') {
					this.show = true
				} else {
					this.$refs[open].open()
				}
			},
			cancel(type) {
				if (type === 'tip') {
					this.show = false
					return
				}
				this.$refs[type].close()
			},
			change(e) {
				console.log(e.show)
			},
			rightTapHandle(){
				console.log(3333333);
			}
		}
	}
</script>

<style>
	.queding{
		color: #559EFF;
		position: absolute;
		font-size: 30upx;
		margin-left: 650upx;
		margin-top: -60upx;
	}
	.crew{
		/* background: #F6F6F6; */
		width: 750upx;
		margin-top: 130upx;
		padding-bottom: 30upx;
		height: auto;
		display: table;
	}
	.crew-list{
		width: 704upx;
		margin-left: auto;
		margin-right: auto;
	}
	.crew-item{
		width: 340upx;
		height: 470upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin-top: 20upx;
		position: relative;
		border: 1upx #FFFFFF;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
	}
	.crew-item:nth-child(odd){
		float: left;
	}
	.crew-item:nth-child(even){
		float: right;
	}
	.crew-item .img{
		width: 340upx;
		height: 336upx;
		border-radius: 20upx 20upx 0 0 ;
	}
	.crew-item .one{
		margin-top: 10upx;
		margin-left: -60upx;
		width: 39upx;
		height: 39upx;
		position: absolute;
	}
	.crew-item .img2{
		margin-top: 20upx;
		margin-left: -60upx;
		width: 39upx;
		height: 39upx;
		position: absolute;
	}
	.crew-item .tip{
		padding: 8upx;
		position: absolute;
		/* width: 80upx; */
		height: 36upx;
		color: #FFFFFF;
		font-size: 18upx;
		text-align: center;
		line-height: 36upx;
		max-width: 300upx;
		overflow: hidden;
		border-radius: 20upx 0 20upx 0;
		background: rgba(0,0,0,0.5);
		z-index: 5;
	}
	.name{
		width: 285upx;
		margin-left: 24upx;
		margin-top: 21upx;
		height:26upx;
		
	}
	.name text{
		width: 285upx;
		font-size: 26upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.price{
		font-size: 26upx;
		color: #DD540A;
		margin-right: 16upx;
		margin-top: 12upx;
		float: right;
	}
	.fen{
		font-size: 26upx;
		margin-left: 21upx;
		margin-top: 12upx;
		color: #555555;
	}
	.qi{
		font-size: 26upx;
		color: #555555;
	}
	.disp{
		display: flex;
		width: 690upx;
		margin:30upx auto;
		justify-content: space-between;
	}
	.dislbutton{
		float: right;
	}
	.dislbutton button{
		color: #FFFFFF;
		background-color:#2E8EFF;
		border-radius:40upx;
		border: 1px solid #2E8EFF;
		font-size: 28upx;
		width: 150upx;
		height: 70upx;
		line-height: 70upx;
	}
	.dislinput input{
		width: 480upx;
		height: 70upx;
		padding-left: 20upx;
		border: 1px solid #f5f5f5;
		border-radius:40upx;
		font-size: 14px;
		line-height: 70upx;
		background-color:#f5f5f5;
		background-image: url("/static/myPic/yinHangKa.png");
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	.di-item{
		width: 750upx;
		height: 90upx;
		background: rgba(255,255,255,1);
		box-shadow: 0upx -5upx 16upx 0upx rgba(47,155,254,0.16);
		margin-top: 188upx;
	}
	.choose{
		float: left;
		margin-left: 25upx;
		margin-top: 48upx;
		font-size: 24upx;
	}
	.bianji{
		margin-top: 30upx;
		float: left;
		width: 206upx;
		height: 60upx;
		background: #FFFFFF;
		margin-left: 131upx;
		border: 1upx solid #FD7640;
		float: left;
		border-radius: 35upx;
	}
	.bianji text{
		font-size: 24upx;
		margin-left: 31upx;
		margin-top: 14upx;
		color: #FD7640;
		float: left;
	}
	.quxiao{
		margin-top: 30upx;
		margin-left: 29upx;
		width: 173upx;
		height: 60upx;
		opacity: 1;
		background: #FE544C;
		float: left;
		border-radius: 35upx;
	}
	.quxiao text{
		margin-left: 40upx;
		margin-top: 14upx;
		font-size: 24upx;
		color: #FFFFFF;
		float: left;
	}
	/* 提示窗口 */
	.uni-tip {
		padding: 15px;
		width: 300px;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
	}
	
	.uni-tip-title {
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	
	.uni-tip-content {
		padding: 35upx 15upx 35upx 94upx;
		font-size: 14px;
		color: #666;
	}
	
	.uni-tip-group-button {
		margin-top: 10px;
		display: flex;
	}
	
	.uni-tip-button {
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
	.uni-tip-button2 {
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #FE6446;
	}
	
</style>
